<template>
  <div>
    <div v-if="props.dataList?.length <= 0 || props.dataList === null ? true : false">
      <el-empty :image-size="200" />
    </div>
    <el-row
      style="height: 120px"
      v-for="item of props.dataList"
      :key="item.id"
      @click="toDetail(item)"
      class="blog"
    >
      <el-col :span="5">
        <el-image :src="item.firstPicture" style="height: 100px; margin-top: 10px" lazy />
      </el-col>
      <el-col :span="17" style="margin-top: 10px; margin-left: 10px">
        <div style="height: 25px">
          <span class="fsw-small" style="color:#000">{{ titleUtil.title(item.title) }}</span>
        </div>
        <div style="height: 50px">
          <p>
            {{ item.description }}
          </p>
        </div>
        <div
          class="font-small"
          style="font-weight: 100; height: 25px; line-height: 25px; display: flex"
        >
          <div class="bot" title="点赞">
            <i class="iconfont icon-fabulous icon"></i>
            <span>{{ titleUtil.numberTo(item.like) }}</span>
          </div>
          <div class="bot" title="收藏">
            <i class="iconfont icon-favorite icon"></i>
            <span>{{ titleUtil.numberTo(item.collect) }}</span>
          </div>
          <div class="bot" style="width: 140px; overflow: hidden" @click.stop="toUser(item.userId)">
            <i class="iconfont icon-wode icon"></i>
            <span class="author">作者：{{ item.author }}</span>
          </div>
          <div class="bot" style="width: 140px; overflow: hidden; margin-top: 3px">
            <span>发布时间：{{ titleUtil.formatDateToYYYYMMDD(item.createTime) }}</span>
          </div>
          <div class="bot" style="margin-left: 20px; color: #778899; margin-top: 3px">
            <el-popover placement="right" :width="50" trigger="hover">
              <template #reference>
                <el-icon><MoreFilled /></el-icon>
              </template>
              <div>
                分类：<el-tag type="primary" size="samll">{{ item.typeName }}</el-tag>
              </div>
            </el-popover>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import titleUtil from '@/util/titleUtil'
import { watch } from 'vue'

import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const props = defineProps({
  dataList: {
    type: Object,
    default: null
  }
})

const load = () => {}

const router = useRouter()
const store = useStore()

const toDetail = (item) => {
  console.log('传递前', item)
  store.dispatch('setBlogItem', item)
  router.push('/blogdetail')
}

const toUser = (userId) => {
  router.push({ name: 'UserPage', params: { userId: userId } })
}
</script>

<style scoped>
.bot {
  height: 25px;
  width: 80px;
  line-height: 25px;
}

.bot:hover {
  cursor: pointer;
}

.icon {
  margin-top: 1px;
  font-size: 14px;
}

.blog:hover {
  background: #eee;
  cursor: pointer;
}
</style>
